<template>
  <div class="radio-pop-ct">
    <div class="radio-ct">
      <div
        class="b-s radio-item"
        v-for="(item,index) in collection"
        :key="index"
        @click="chooseRadio(item)"
      >
        <div :class="['flex-c r-outer',item[sInnerName]===iSelected?'selected-radio':'']">
          <div class="r-inner"></div>
        </div>
        <div class="item-txt">{{item.iName}}</div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * radio选择集合
 * @desc 用户单选框radio组件
 * @author ZXY
 * @date 2019年02月12日
 * @param collection  aCollection: [{iKey: 'aaaa', iName: '选择1'}, {iKey: 'bbbb', iName: '选择2'}, {iKey: 'cccc', iName: '选择3'}],
 * @param authCallback 回调函数，获取状态
 *页面引入import radioList from '@/components/common/radio-list.vue'
 *   <radioList  @chooseResult="chooseResult" :collection="aCollection"  :selected="'aaaa'"></radioList>
 */
export default {
  props: ['collection', 'selected', 'iType', 'sName'], //
  data () {
    return {
      aCollection: [
        { iKey: 'aaaa', iName: '选择1' },
        { iKey: 'bbbb', iName: '选择2' },
        { iKey: 'cccc', iName: '选择3' }
      ],
      sInnerName: 'iKey', // 选中key 或者name
      aSelected: [],
      oSelected: {},
      iSelected: ''
    }
  },
  components: {},
  watch: {},
  created () {
    this.iSelected = this.selected
    this.sInnerName = this.sName || 'iKey'
    let collection = this.collection || []
    let selResult = collection.filter(
      item => item[this.sInnerName] === this.selected
    )
    if (selResult.length > 0) {
      this.iSelected = selResult[0][this.sInnerName]
    }
  },
  mounted () {},
  async onLoad () {},
  computed: {},
  methods: {
    async authCallback (authResult) {
      this.$emit('authCallback', authResult)
    },
    chooseRadio (item) {
      console.log('item-------------------', item.iKey, '-----', item.iName)
      this.iSelected = item[this.sInnerName]
      this.oSelected = item
      this.$emit('chooseResult', item, this.iType)
    },
    /**
     * 选择确认
     */
    submitData () {
      let { oSelected } = this
      this.$emit('chooseResult', oSelected)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-s {
  box-sizing: border-box;
}
.radio-pop-ct {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(51, 51, 51, 0.5);
  z-index: 100;
  font-size: cmSize(48);
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-ct {
  background: #ffffff;
  width: cmSize(800);
  padding: cmSize(50) cmSize(36);
  border-radius: cmSize(10);
  .radio-item {
    display: flex;
    align-items: center;
    padding: cmSize(20);
  }
  .r-outer {
    width: cmSize(60);
    height: cmSize(60);
    border-radius: 50%;
    border: 1px solid #cccccc;
    .r-inner {
      width: cmSize(30);
      height: cmSize(30);
      border-radius: 50%;
      background: #ffffff;
    }
  }
  .selected-radio {
    background: #226cbd;
    border: none;
  }
  .item-txt {
    padding: 0 cmSize(46);
  }
}
</style>
